<template>
  <div class="oldversion">
    <Header :title="isEdit ? '编辑外语能力' : '添加外语能力'"></Header>
    <div class="topheader page">
      <div class="itembox disFlex" v-for="(item, index) in itemList" :key="index" @click="topage(item)">
        <div class="leftItem">
          <label for="" class="fontBlack2 font36 textL">{{ item.title }}</label>
          <label for="" class=" font40 fontGrayB9 textL" v-if="!item.data">{{ item.placeholder }}</label>
          <label for="" class="fontBlack2 font40 textL" v-else>{{ item.data }}</label>
        </div>
        <img :src="require('@/assets/images/chevron-right.png')" class="old_rightIcon1">

      </div>
      <div class="blockbox"></div>
      <div class="bottom_submitBtn" v-if="!isEdit">
        <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
      </div>
      <div class="old_bottom_submitBtn_two disFlex" v-else>
        <div @click="del" class="font44 bgGrayec fontBlack73">删除</div>
        <div @click="submit" class="font44 bgBlueFC fontWhite">保存</div>
      </div>
    </div>

    <picker-popup :columns="column1" :show="languageType_show" @change="isConfirm" :type="'languageType'"
      :customFieldName="customFieldName">
    </picker-popup>
    <picker-popup :columns="column2" :show="languageLevel_show" @change="isConfirm" :type="'languageLevel'"
      :customFieldName="customFieldName">
    </picker-popup>
    <dialog-btn :title="'是否确认删除'" :show="delshow" :isold="true"></dialog-btn>
    <dialog-btn :title="'是否保存当前页面'" :show="exitshow" :isold="true"></dialog-btn>

  </div>
</template>

<script>
import Header from '@/components/oldheader.vue';
import PickerPopup from '@/components/pickerpopup.vue';
import DialogBtn from '@/components/dialogbtn.vue';
import { getCurrentInstance, reactive } from 'vue'
import { Toast } from 'vant';
export default {
  components: {
    Header,
    PickerPopup,
    DialogBtn
  },
  data() {
    return {
      header_title: '添加外语能力',
      right_text: '',
      itemList: [
        { title: '语种', data: '', placeholder: '请选择', page: 'languageType' },
        { title: '能力', data: '', placeholder: '请选择', page: 'languageLevel' },
      ],
      isEdit: false,
      languageType_show: false,
      languageLevel_show: false,
      column1: [],
      column2: [],
      delshow: false,
      customFieldName: { text: 'dictLabel' },
      token: this.$store.state.token,
      data: {}, //需要回调的参数id和vesion
      obj: {},
      paramid: this.$route.params.id,//编辑参数
      exitshow: false,
      idcard: this.$store.state.idCard
    }
  },
  mounted() {
    this.api = getCurrentInstance().appContext.config.globalProperties.$http;
    var that = this;
    var data = {
      identityNumber: that.idcard
    }
    var workInfo = this.$store.state.workInfo;
    var paramid = this.$store.state.id; //是否为编辑
    this.api.get('/personnel/h5/resumeInfo/queryOne', data).then(res => {
      var data = res.data;
      if (workInfo.language || workInfo.level) {
        that.obj = workInfo;
        if (paramid) {
          that.isEdit = true;
        }
      } else {
        if (data.resumeLanguageRst) {
          var data1 = data.resumeLanguageRst;
          if (data1.id && data1.version + '') {
            var myget = {
              id: data1.id,
              version: data1.version,
              identityNumber: data1.identityNumber
            };
            that.$store.commit('setmyget', myget);
          }
          if (that.paramid) {
            for (let i = 0; i < data1.languageInfoList.length; i++) {
              if (data1.languageInfoList[i].id == that.paramid) {
                that.$store.commit('setworkInfo', data1.languageInfoList[i]);
                that.$store.commit('setid', that.paramid);
                that.isEdit = true;
                that.obj = data1.languageInfoList[i]
              }
            }
          }
          if (data1.languageInfoList.length > 0) {
            that.$store.commit('setworkList', data1.languageInfoList);
          }
        }
      }
      this.getOptions('languageType');
      this.getOptions('languageLevel');
    })

  },
  methods: {
    topage(e) {
      this.type = e.page;
      this[e.page + '_show'] = true;
    },
    isClose() {
      this.languageType_show = false;
      this.languageLevel_show = false;
    },
    ispopClose() {
      this.delshow = false;
      if (this.exitshow) {
        this.exitshow = false;
        this.$store.commit('setworkInfo', {});
        this.$store.commit('setid', '');
        this.$store.commit('setmyget', {});
        this.$store.commit('setworkList', []);
        this.$router.replace('/oldresume')
      }
    },
    isConfirm(value, index, type) {
      for (let i of this.itemList) {
        if (i.page == type) {
          i.data = value.dictLabel;
          i.val = value.dictValue;
        }
      }
      this[type + '_show'] = false;
      if (type == 'languageType') {
        this.obj['language'] = value.dictValue;
      } else {
        this.obj['level'] = value.dictValue;
      }

    },
    submit() {
      for (let i of this.itemList) {
        if (!i.data) {
          Toast(i.placeholder + i.title);
          return;
        }
      }
      var that = this;

      var data = this.$store.state.myget;
      data.identityNumber = this.token;
      var list = this.$store.state.workList;
      if (this.$store.state.id) {
        for (let i = 0; i < list.length; i++) {
          if (this.$store.state.id == list[i].id) {
            list[i] = this.obj;
            list[i].resumeId = data.id;
          }
        }
      } else {
        var obj = Object.assign({}, this.obj);
        obj.resumeId = data.id;
        list.push(obj);
      }
      data.languageInfoList = list;
      this.api.post('/personnel/h5/resumeInfo/addOrEditLanguage', data).then(res => {
        if (res.code == 200) {
          that.$store.commit('setworkInfo', {});
          that.$store.commit('setid', '');
          that.$store.commit('setmyget', {});
          that.$store.commit('setworkList', []);
          that.$router.replace('/oldresume')
        }
      })
    },
    del() {
      this.delshow = true;
    },
    ispopSub() {
      if (this.delshow) {
        this.delshow = false;
        this.itemList[0].data = '';
        this.itemList[1].data = '';
        this.api.get('/personnel/h5/resumeInfo/deleteLanguage', { id: this.$store.state.id }).then(res => {
          if (res.code == 200) {
            this.$store.commit('setworkInfo', {});
            this.$store.commit('setid', '');
            this.$store.commit('setmyget', {});
            this.$store.commit('setworkList', []);
            this.$router.replace('/oldresume')
          }
        })
        return
      }
      if (this.exitshow) {
        this.exitshow = false;
        this.submit();
        return;
      }
    },
    getOptions(value) {
      let that = this;
      this.api.get('/personnel/h5/resumeInfo/' + value).then(res => {
        var val = ''
        if (value == 'languageType') {
          that.column1 = res.data[value];
          val = 'language'
          var lt = that.column1.find((e, i) => {
            if (e.dictValue == this.obj[val]) {
              return e
            }
          });
          if (lt) {
            that.itemList[0].data = lt.dictLabel
          }
          that.itemList[0].val = this.obj[val]

        } else {
          val = 'level'
          that.column2 = res.data[value];
          var ll = that.column2.find((e, i) => {
            if (e.dictValue == this.obj[val]) {
              return e
            }
          });
          if (ll) {
            that.itemList[1].data = ll.dictLabel;
          }
          that.itemList[1].val = this.obj[val]
        }
      })
    },
    goback() {
      if (JSON.stringify(this.obj) != '{}') {
        this.exitshow = true;
      } else {
        this.$store.commit('setworkInfo', {});
        this.$store.commit('setid', '');
        this.$store.commit('setmyget', {});
        this.$store.commit('setworkList', []);
        this.$router.replace('/oldresume')
      }
    }
  }
}
</script>

<style scoped>
.itembox {
  border-bottom: 0.02rem solid #E8E9EC;
  height: 1.66rem;
}

.leftItem {
  display: flex;
  flex-direction: column;
}

.leftItem label:nth-child(1) {
  margin-bottom: 0.08rem;
}

.blockbox {
  height: 1.6rem;
}
</style>